"use client"

import Nouislider from "nouislider-react";
import "nouislider/distribute/nouislider.css";
import "./custom.css"
import styles from "./Footer.module.css";
import {useCallback} from "react";

export default function Footer (){
    return (
        <div className={styles.footer}>
            <Slider></Slider>
        </div>
    )
}

const Slider = () => {
    const timestamp = useCallback((str: string)=> {
        return new Date(str).getTime();
    },[]);

    const formattedDate = useCallback((str: string)=>{
        let date = new Date(str);

        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        let hour = date.getHours();

        return  year + '-' +
            month.toString().padStart(2, '0') + '-' +
            day.toString().padStart(2, '0') + '-' +
            hour.toString().padStart(2, '0');
    }, [])

    return (
        <Nouislider range={{ min: timestamp('2024-03-01'), max: timestamp('2024-04-01') }}
                    start={[timestamp('2024-03-16'), timestamp('2024-03-20')]}
                    step={60 * 60 * 1000}
                    tooltips={[
                        { to: formattedDate },
                        { to: formattedDate }
                    ]}
                    connect
                    className={styles.slider}
        />
    )
};
